<template>
  <a-form :model="form" :style="{ width: '600px' }" @submit="handleSubmit">
    <a-form-item field="name" tooltip="请输入您的姓名" label="姓名">
      <a-input v-model="form.name" placeholder="请输入您的姓名" />
    </a-form-item>
    <a-form-item field="post" tooltip="请输入您的联系电话" label="联系电话">
      <a-input v-model="form.name" placeholder="请输入您的联系电话" />
    </a-form-item>
    <a-form-item field="address" tooltip="请填写您的地址" label="地址">
      <a-cascader v-model="form.name" placeholder="请填写您的地址" />
    </a-form-item>
  </a-form>
</template>

<script>
import { reactive, ref } from "vue";
import { cityProvince } from "./cityProvince.js";
export default {
  setup() {
    const form = reactive({
      name: "",
      post: "",
      address: "",
    });
    const handleSubmit = (data) => {
      console.log(data);
    };

    return {
      form,
      handleSubmit,
      cityProvince,
    };
  },
};
</script>
